<template>
	<div id="Explain">
		<div v-for="(addition,index) in userList " :key="index" class="user-wrap">
			<one-explain :addition="addition">
			</one-explain>
		</div>
		<div class="demonstration">
			<el-pagination ref="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="pageSizes"
			:page-size="pageSize"
			:layout="isMobile === true ? 'total, sizes, prev, next, jumper' : 'total, sizes, prev, pager, next, jumper'"
			:total="totalSizes">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	//加一个对点赞数的传值和前端页面的修改
	import constant from '../static/constant.json'
	import oneExplain from './oneExplain.vue'
	import { _isMobile } from '../js/common.js'
	export default {
		name: 'Explain',
		components: {
			oneExplain: oneExplain
		},
		props: {
			msg: String,
			flag: Number, // 0 表示搜索结果中的相关介绍   1 表示词库分类页面
		},
		watch: {
			'$route.query.inputWord'(newVal, oldVal) {
				this.inputWord = newVal;
				this.getdata();
			}
		},
		data() {
			return {
				isMobile: false,
				currentPage: 1,
				pageSizes: [2, 4, 8, 16],
				pageSize: 2,
				totalSizes: 0,
				dataList:[],
				prefercountlist:[],
				inputWord: '',
				showornot:[],
				userList:[]
			}
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.$refs.pagination.handleCurrentChange();
				this.currentPage = this.$refs.pagination.currentPage;
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			getList() {
				this.userList = this.dataList.slice((this.currentPage - 1) * (this.pageSize), (this.currentPage - 1) * (this.pageSize) +
					this.pageSize);
			},
			handlPlusLike(addition) {
				this.$axios.post('api/setprefer', {
						userName: addition.username,
						id: addition.id,
					})
					.then(function(response) {
						console.log(response); //返回当前用户是否点赞,若没有点赞，后台自行加一
						if (response.data.code===1) {
							addition.prefercount+=1;
						} else {
							this.$alert('这是一段内容', '标题名称', {
								confirmButtonText: '确定',
								callback: action => {
									this.$message({
										type: 'info',
										message: `action: ${ action }`
									});
								}
							});
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			getdata(){
				this.$axios.post("api/getwordadditions", {
					word: this.inputWord //通过关键词来查找符合这个词的回答
				})
				.then(response=> {
						this.dataList=response.data;
						this.getList()
						this.totalSizes=response.data.length;
					}
				)
				.catch(e=> {
				})
			}
		},
		mounted() {
			this.inputWord = this.$route.query.inputWord;
			this.getdata()
			this.isMobile = _isMobile()
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.firstcol {
		line-height: 40px;
	}
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
		line-height: 100%;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	#Explain {
		padding-bottom: 10px;
	}

	.class {}

	.user-wrap {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		min-height: 100px;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 10px;
		margin-top: 10px;
		padding: 5px;
		background: gainsboro;
	}

	.user-wrap .user-wrap__name {
		width: 40%;
		height: 30px;
		text-align: left;
	}

	.user-wrap .user-wrap__like {
/* 		width: 40%;
		height: 30px;
		text-align: right; */
	}

	.user-wrap .user-wrap__content {
		width: 80%;
		height: 50px;
		text-align: left;
		word-break: break-word;
	}

	.user-wrap .user-wrap__content1 {
		width: 80%;
		min-height: 50px;
		text-align: left;
		word-break: break-word;
	}

	.user-wrap .user-wrap__link {
		width: 100%;
		text-align: right;
	}
</style>
